<template>
  <div class="Record">
    <van-nav-bar
      title="交易记录"
      left-arrow="true"
      style="background-color: #000"
      @click-left="$router.back()"
    />
    <div style="width: 100%; height: 45px">
      <van-tabs
        v-model="active"
        color="#fff"
        title-active-color="#fff"
        title-inactive-color="#fff"
        background="#000"
        @change="Onchange"
      >
        <van-tab title="当前委托">当前委托</van-tab>
        <van-tab title="历史委托">历史委托</van-tab>
        <van-tab title="资产">资产</van-tab>
        <van-tab title="交易账户">交易账户</van-tab>
      </van-tabs>
    </div>
    <div class="Record_fu" v-if="[0, 1].includes(Cindex)">
      <div
        class="Record_fu_item"
        :style="{ color: index == 0 ? '#fff' : '' }"
        v-for="(item, index) in listtab"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="Record_fu_two" style="margin: 0" v-if="[0, 1].includes(Cindex)">
      <div
        class="Record_fu_two_left"
        style="display: flex; align-items: center"
      >
        <span
          :style="{
            marginLeft: index == 1 ? '20px' : '',
            color: index == 0 ? '#fff' : '',
            flexShrink: 0,
          }"
          v-for="(item, index) in listtabtwo"
          :key="index"
        >
          {{ item.name
          }}<van-icon
            name="arrow-down"
            size="10"
            color="#ccc"
            style="margin-top: 5px; margin-left: 3px"
          />
        </span>

        <DateRangeSelect
          style="margin-left: 20px"
          :dateRange.sync="dateRange"
        />
      </div>
      <div class="Record_fu_two_rig">
        <span>批量撤单</span>
      </div>
    </div>
    <div class="Record_fu_two" v-if="Cindex == 3">
      <div class="Record_fu_two_left">
        <span
          :style="{
            marginLeft: index == 1 ? '20px' : '',
            color: index == 0 ? '#fff' : '',
          }"
          v-for="(item, index) in listtabtwos"
          :key="index"
        >
          {{ item.name
          }}<van-icon
            name="arrow-down"
            size="10"
            color="#ccc"
            style="margin-top: 5px; margin-left: 3px"
          />
        </span>
      </div>
      <div class="Record_fu_two_rig">
        <span>批量撤单</span>
      </div>
    </div>
    <div style="height: 60vh; display: flex">
      <img
        src="../../assets/image/Gr.png"
        alt=""
        style="width: 102px; height: 124px; margin: auto"
        v-if="Cindex == 1"
      />
      <van-radio-group v-if="index == 1">
        <van-cell-group>
          <van-cell
            :title="item.title"
            style="margin-top: 20px"
            clickable
            v-for="(item, index) in listThree"
            :key="index"
          >
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <div class="Fomitem" v-if="Cindex == 0">
        <div
          class="dashboard"
          v-for="(item, index) in 4"
          :key="index"
          @click="show = true"
          style="border-bottom: 1px solid #2e2e30"
        >
          <div class="header" style="font-size: 16px">
            <h5>ETH/USDT</h5>
            <p style="font-size: 12px; color: #ccc">完全成交</p>
          </div>
          <div
            class="trade-items"
            style="display: flex; font-size: 10px; margin-top: 5px"
          >
            <span class="label">限价</span>
            <span class="label">买入</span>
            <span class="time">11/04 20:45:59</span>
          </div>
          <div class="trade-info" style="margin-top: 20px">
            <div class="trade-item">
              <span class="labels">委托数量(ETH)</span>
              <span class="value">0.241971</span>
            </div>
            <div class="trade-item">
              <span class="labels">已成交量(ETH)</span>
              <span class="value">0.00445</span>
            </div>
            <div class="trade-item">
              <span class="labels">成交均价</span>
              <span class="value">2,471.7</span>
            </div>
          </div>
        </div>
      </div>
      <div
        style="width: 100%; height: auto; position: fixed; bottom: 0%"
        v-if="index == 4"
      >
        <reg></reg>
      </div>
      <van-popup v-model="show" position="bottom">
        <div class="van-popup-content">
          <div
            v-for="(item, index) in options"
            :key="index"
            :class="timeType === index && 'active'"
            @click="timeType = index"
          >
            <div>
              {{ item.text }}
            </div>
          </div>
        </div>
      </van-popup>
      <div style="width: 95%; margin-left: 2.5%" v-if="Cindex == 2">
        <BitcoinDashboard
          @palyPop="palyPop"
          @ShowPop="ShowPop"
          @stopShow="stopShow"
          :isshow="index == 1 ? false : true"
          v-for="(item, index) in 3"
          :key="index"
        ></BitcoinDashboard>
      </div>
      <van-popup v-model="Ushow" position="bottom">
        <div style="width: 100%; background-color: #000">
          <price @removepri="removepri"> </price>
        </div>
      </van-popup>
      <van-popup v-model="palyshow" position="bottom">
        <div style="width: 100%; background-color: #000">
          <purchase @palyShowRemove="palyShowRemove"> </purchase>
        </div>
      </van-popup>
      <div style="width: 100%; margin-top: 30px" v-if="Cindex == 3">
        <div
          style="
            padding-bottom: 20px;
            border-bottom: 0.1px solid rgb(46, 46, 48);
            margin-top: 10px;
          "
          v-for="(item, index) in 4"
          :key="index"
        >
          <div class="zahngdan">
            <div style="display: flex">
              <img
                src="../../assets/btc_icon.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <span style="margin-left: 5px">USDT</span>
            </div>
            <span>-10.99894239</span>
          </div>
          <div class="zahngdan_two" style="margin-top: 10px">
            <span>ETH/USDT</span>
          </div>
          <div class="zahngdan_two" style="margin-top: 5px">
            <span
              ><span style="color: #fff">现货</span> -
              <span style="color: red">卖出</span>10.988892323 USDT</span
            >
            <span>手续费<span style="color: #fff">0.00000000</span></span>
          </div>
          <div class="zahngdan_two" style="margin-top: 5px">
            <span>2024/11/04 20:43:23</span>
            <span>账户余额<span style="color: #fff">4,898.00102400</span></span>
          </div>
        </div>
        <div
          style="
            color: #a5a5a5;
            font-size: 10px;
            text-align: center;
            margin-top: 30px;
          "
        >
          已展示 90 天内的全部交易记录
        </div>
      </div>
      <van-popup v-model="stop" position="bottom">
        <div style="width: 100%; background-color: #000">
          <Stop @showtop="showtop"> </Stop>
        </div>
      </van-popup>
    </div>
    <DateRangeSelect />
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
import { RadioGroup, Radio } from "vant";
import { Cell, CellGroup } from "vant";
import reg from "./Reg.vue";
import { Popup } from "vant";
import BitcoinDashboard from "./BTC.vue";
import price from "./price.vue";
import purchase from "./purchase.vue";
import Stop from "./Stop.vue";
import DateRangeSelect from "./DateRangeSelect.vue";

export default {
  data() {
    return {
      active: 0,
      show: false,
      Ushow: false,
      stop: false,
      listtab: [
        {
          name: "全部",
        },
        {
          name: "限价|市价",
        },
        {
          name: "高级限价委托",
        },
        {
          name: "止盈止损",
        },
        {
          name: "移动",
        },
      ],
      listtabtwo: [
        {
          name: "交易类型",
        },
        {
          name: "交易品种",
        },
      ],
      listtabtwos: [
        {
          name: "币种",
        },
        {
          name: "交易品种",
        },
      ],
      listThree: [
        {
          title: "全部",
        },
        {
          title: "现货",
        },
        {
          title: "永续",
        },
        {
          title: "交割",
        },
        {
          title: "杆杠",
        },
        {
          title: "期权",
        },
      ],
      index: 0,
      Cindex: 0,
      palyshow: false,
      options: [
        { text: "按委托时间", value: 1 },
        { text: "按成交时间", value: 2 },
      ],
      timeType: 1,
      dateRange: {
        start: new Date().toLocaleDateString(),
        end: new Date().toLocaleDateString(),
      },
    };
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [reg.name]: reg,
    [Popup.name]: Popup,
    [BitcoinDashboard.name]: BitcoinDashboard,
    [price.name]: price,
    [purchase.name]: purchase,
    [Stop.name]: Stop,
    DateRangeSelect,
  },
  methods: {
    removepri(e) {
      this.Ushow = e;
    },
    palyShowRemove(e) {
      this.palyshow = e;
    },
    showtop(e) {
      this.stop = e;
    },
    stopShow(e) {
      this.stop = e;
    },
    Onchange(e) {
      this.Cindex = e;
    },
    ShowPop(e) {
      this.Ushow = e;
    },
    palyPop(e) {
      this.palyshow = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.zahngdan {
  display: flex;
  justify-content: space-between;
  font-size: 30px;
  color: #fff;
  width: 90%;
  margin-left: 5%;
}

.zahngdan_two {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: #929292;
  width: 90%;
  margin-left: 5%;
}

/deep/ .van-hairline--bottom::after {
  border: none !important;
}

/deep/ .van-nav-bar .van-icon {
  color: #fff !important;
}

/deep/ .van-nav-bar__title {
  color: #fff !important;
  text-align: center;
}

/deep/ .van-radio-group {
  width: 100% !important;
}

/deep/ .van-cell::after {
  border: none;
}

/deep/ .van-cell-group {
  background: #000 !important;
}

/deep/ .van-cell {
  background: #000 !important;
  color: #fff !important;
}

.Record {
  height: 100vh;
  background: #000;

  .Record_fu {
    height: 40px;
    display: flex;

    .Record_fu_item {
      font-size: 1.35rem;
      height: 100%;
      line-height: 40px;
      margin: auto;
      color: #929292;
    }
  }

  .Record_fu_two {
    height: 30px;
    display: flex;
    width: 100%;

    //   margin-left: 1%;
    .Record_fu_two_left {
      width: 60%;
      margin-left: 5%;
      line-height: 30px;
      color: #929292;
      font-size: 1.35rem;
      margin-top: 20px;
    }

    .Record_fu_two_rig {
      width: 40%;
      line-height: 30px;
      font-size: 1.35rem;
      margin-top: 20px;
      color: #fff;
      text-align: end;
      margin-right: 20px;
    }
  }

  .Fomitem {
    width: 95%;
    margin-left: 2.5%;

    .dashboard {
      background-color: black;
      color: white;
      padding: 20px;

      margin-top: 20px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .trade-info {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .trade-item {
      display: flex;
      margin-bottom: 10px;

      flex-direction: column;
    }

    .trade-items {
    }

    .label {
      margin-right: 10px;
      color: lightgreen;
    }

    .labels {
      color: #929292;
    }

    .value {
      font-weight: bold;
    }

    .time {
      color: lightgreen;
    }
  }
}

::v-deep .van-popup {
  // width: 92% !important;
  background: #121212 !important;
  border-radius: 40px 40px 0 0;

  .van-popup-content {
    padding: 40px 30px;
    padding-bottom: 60px;
    background: #121212;
    color: #fff;
    display: grid;
    gap: 20px;
    position: relative;
    overflow: hidden;

    & div {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 28px;
    }

    & > div {
      padding: 10px 20px;
      border-radius: 10px;
    }

    .active {
      // background-color: #191919;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        background: url("@/assets/image/Group 7764.png") no-repeat center center;
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>
